<template>
  <BlankLayout>
    <div class="document">
      <div class="document-header">
        <div class="container">
          <a href="/" class="document-header-logo">
            <img src="/images/logo.svg" alt="AnyRender" />
          </a>
          <div class="document-header-btns">
            <div class="document-header-btn" @click="startCreating">开始创造</div>
            <div class="document-header-btn document-header-btn-menu" @click="openDrawer">文档菜单</div>
          </div>
        </div>
      </div>
      <div class="document-content">
        <div class="container">
          <div class="document-left">
            <div class="menu-list">
              <div class="menu-list-item" v-for="item in menuList" :key="item.title">
                <div class="menu-title">{{ item.title }}</div>
                <div
                  :class="selectedMenuItem.name === menu.name ? 'menu-item menu-item-active' : 'menu-item'"
                  v-for="menu in item.items"
                  :key="menu.name"
                  @click="selectMenuItem(menu)"
                >
                  <div class="menu-item-name">
                    <img class="menu-item-icon" :src="menu.icon" alt="icon" />
                    {{ menu.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="document-right">
            <div class="document-menu-detail">
              <div class="menu-detail-title">{{ selectedMenuItem.title }}</div>
              <div class="menu-detail-tips">{{ selectedMenuItem.tips }}</div>
              <div class="menu-detail-desc">{{ selectedMenuItem.desc }}</div>
              <div class="menu-detail-video" v-if="selectedMenuItem.video">
                <img :src="selectedMenuItem.video" alt="video" />
              </div>
              <div class="menu-detail-image" v-if="selectedMenuItem.image">
                <img :src="selectedMenuItem.image" alt="image" />
              </div>
            </div>
            <div class="document-right-footer">
              <img class="logo" src="/images/logo.svg" alt="AnyRender" />
              <div class="document-right-footer-text">AnyRender 工作室</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 抽屉 -->
    <el-drawer v-model="drawerVisible" direction="ltr" size="60%" @close="closeDrawer">
      <template #header>
        <div class="drawer-header">
          <img src="/images/logo.svg" alt="AnyRender" />
        </div>
      </template>
      <div class="drawer-content">
        <div class="menu-list">
          <div class="menu-list-item" v-for="item in menuList" :key="item.title">
            <div class="menu-title">{{ item.title }}</div>
            <div
              :class="selectedMenuItem.name === menu.name ? 'menu-item menu-item-active' : 'menu-item'"
              v-for="menu in item.items"
              :key="menu.name"
              @click="selectMenuItem(menu)"
            >
              <div class="menu-item-name">
                <img class="menu-item-icon" :src="menu.icon" alt="icon" />
                {{ menu.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </BlankLayout>
</template>

<script setup>
  import { ref } from "vue";
  import { useRouter } from "vue-router";

  const router = useRouter();
  const drawerVisible = ref(false); // 控制抽屉的显示与隐藏

  const menuList = ref([
    {
      title: "入门指南",
      items: [
        {
          name: "系统要求",
          icon: "/images/resources/document/icons/zhinan/icon-xitongyaoqiu.png",
          title: "文稿",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          image: "/images/resources/document/img.jpg",
        },
        {
          name: "渲染",
          icon: "/images/resources/document/icons/zhinan/icon-xuanran.png",
          title: "渲染",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "仪表盘",
          icon: "/images/resources/document/icons/zhinan/icon-yibiaopan.png",
          title: "仪表盘",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "账户设置",
          icon: "/images/resources/document/icons/zhinan/icon-zhanghushezhi.png",
          title: "账户设置",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "角色",
          icon: "/images/resources/document/icons/zhinan/icon-juese.png",
          title: "角色",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "用户界面",
          icon: "/images/resources/document/icons/zhinan/icon-yonghujiemian.png",
          title: "用户界面",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "场景方向",
          icon: "/images/resources/document/icons/zhinan/icon-changjingfangxiang.png",
          title: "场景方向",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "单位",
          icon: "/images/resources/document/icons/zhinan/icon-danwei.png",
          title: "单位",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "如何获得帮助",
          icon: "/images/resources/document/icons/zhinan/icon-help.png",
          title: "如何获得帮助",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
      ],
    },
    {
      title: "导入",
      items: [
        {
          name: "导入格式",
          icon: "/images/resources/document/icons/import/icon-importType.png",
          title: "文稿",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "Figma框架导入",
          icon: "/images/resources/document/icons/import/icon-Figma.png",
          title: "文稿",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          image: "/images/resources/document/img.jpg",
        },
        {
          name: "CAD文件",
          icon: "/images/resources/document/icons/import/icon-CADfile.png",
          title: "CAD文件",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          image: "/images/resources/document/img.jpg",
        },
      ],
    },
    {
      title: "设计过程",
      items: [
        {
          name: "设计模式",
          icon: "/images/resources/document/icons/guocheng/icon-shejimoshi.png",
          title: "文稿",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "材料和纹理",
          icon: "/images/resources/document/icons/guocheng/icon-cailiaohewenli.png",
          title: "材料和纹理",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "动画材料",
          icon: "/images/resources/document/icons/guocheng/icon-donghuacailiao.png",
          title: "动画材料",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "贴花纸",
          icon: "/images/resources/document/icons/guocheng/icon-tiehua.png",
          title: "贴花纸",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "紫外线映射",
          icon: "/images/resources/document/icons/guocheng/icon-ziwaixian.png",
          title: "紫外线映射",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "相机",
          icon: "/images/resources/document/icons/guocheng/icon-xiangji.png",
          title: "相机",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "照明和环境",
          icon: "/images/resources/document/icons/guocheng/icon-zhaoming.png",
          title: "照明和环境",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "效果",
          icon: "/images/resources/document/icons/guocheng/icon-xiaoguo.png",
          title: "效果",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "背景",
          icon: "/images/resources/document/icons/guocheng/icon-beijing.png",
          title: "背景",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "地面飞机",
          icon: "/images/resources/document/icons/guocheng/icon-dimian.png",
          title: "地面飞机",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "控制杆",
          icon: "/images/resources/document/icons/guocheng/icon-kongzhigan.png",
          title: "控制杆",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "图书馆",
          icon: "/images/resources/document/icons/guocheng/icon-tushuguan.png",
          title: "图书馆",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "编辑模式",
          icon: "/images/resources/document/icons/guocheng/icon-edit.png",
          title: "编辑模式",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
      ],
    },
    {
      title: "3D配置器",
      items: [
        {
          name: "变体",
          icon: "/images/resources/document/icons/3d/icon-bianti.png",
          title: "变体",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "互动",
          icon: "/images/resources/document/icons/3d/icon-hudong.png",
          title: "互动",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "动画",
          icon: "/images/resources/document/icons/3d/icon-donghua.png",
          title: "动画",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "浮动用户界面",
          icon: "/images/resources/document/icons/3d/icon-fudong.png",
          title: "浮动用户界面",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
        {
          name: "热点",
          icon: "/images/resources/document/icons/3d/icon-redian.png",
          title: "热点",
          tips: "获取AnyRender功能的详细指南和解释，以帮助您在设计过程中",
          desc: "使用左侧边栏浏览文档。在移动设备上，您可以通过折叠菜单访问。",
          video: "/images/resources/document/video.jpg",
        },
      ],
    },
  ]);

  // 默认选中的菜单项
  const selectedMenuItem = ref(menuList.value[0].items[0]);

  function openDrawer() {
    drawerVisible.value = true;
  }

  function selectMenuItem(item) {
    selectedMenuItem.value = item;
    closeDrawer();
  }

  function closeDrawer() {
    drawerVisible.value = false;
  }

  function startCreating() {
    console.log("开始创造按钮被点击");
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";
  .document {
    .document-header {
      border-bottom: 1px solid #e0e0e0;
      height: 60px;
      .container {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .document-header-logo {
          height: 26px;
          img {
            height: 100%;
          }
        }
        .document-header-btns {
          display: flex;
          gap: 10px;
          .document-header-btn {
            padding: 6px 15px;
            border-radius: 8px;
            background-color: #703ffa;
            color: #fff;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            &.document-header-btn-menu {
              display: none;
            }
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .container {
          .document-header-logo {
            height: 24px;
          }
          .document-header-btns {
            gap: 8px;
            .document-header-btn {
              padding: 4px 12px;
              font-size: 14px;
              &.document-header-btn-menu {
                display: block;
              }
            }
          }
        }
      }
      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
        .container {
          flex-wrap: wrap;
          align-items: center;
          gap: 10px;
          .document-header-logo {
            margin: auto;
            height: 20px;
          }
          .document-header-btns {
            margin: auto;
            gap: 6px;
            .document-header-btn {
              padding: 4px 10px;
            }
          }
        }
      }
    }
    .document-content {
      .container {
        display: flex;
        gap: 20px;
        height: calc(100vh - 80px);
        .document-left {
          width: 200px;
          padding: 30px 0;
          border-right: 1px solid #e0e0e0;
          overflow-y: auto;

          .menu-list {
            .menu-list-item {
              margin-bottom: 20px;
              .menu-title {
                font-size: 14px;
                font-weight: 500;
                color: #585858;
                margin-bottom: 10px;
              }
            }
            .menu-item {
              padding: 5px;
              cursor: pointer;
              margin-bottom: 5px;
              border-radius: 5px;

              .menu-item-name {
                font-size: 14px;
                color: #383838;
                display: flex;
                align-items: center;
                .menu-item-icon {
                  width: 24px;
                  height: 24px;
                  margin-right: 5px;
                }
              }
              &.menu-item-active {
                background-color: #f0f0f0;
                .menu-item-name {
                  font-weight: 600;
                }
              }
            }
          }
        }
        .document-right {
          flex: 1;
          padding: 40px;
          height: 100%;
          overflow: auto;

          .document-menu-detail {
            .menu-detail-title {
              font-size: 36px;
              font-weight: 500;
              margin-bottom: 20px;
            }
            .menu-detail-tips {
              width: fit-content;
              padding: 10px 20px;
              margin-bottom: 30px;
              font-size: 18px;
              color: #585858;
              border: 1px solid #e0e0e0;
              border-radius: 10px;
            }
            .menu-detail-desc {
              font-size: 16px;
              color: #383838;
              margin-bottom: 30px;
            }
            .menu-detail-video,
            .menu-detail-image {
              width: 100%;
              margin-bottom: 30px;
              border-radius: 16px;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
                border-radius: 16px;
                object-fit: cover;
              }
              video {
                width: 100%;
                height: 100%;
                border-radius: 16px;
                object-fit: cover;
              }
            }
          }
          .document-right-footer {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin-top: 100px;
            .logo {
              width: 140px;
            }
            .document-right-footer-text {
              font-size: 14px;
              color: #000;
            }
          }
        }
        // 响应式 电脑
        @media (max-width: $breakpoint-desktop) {
          .document-left {
            width: 160px;
          }
          .document-right {
            padding: 20px;

            .document-menu-detail {
              .menu-detail-title {
                font-size: 32px;
              }
              .menu-detail-tips {
                padding: 6px 12px;
                font-size: 16px;
              }
              .menu-detail-desc {
                font-size: 16px;
              }
            }
          }
        }
        // 响应式 平板
        @media (max-width: $breakpoint-tablet) {
          .document-left {
            display: none;
          }
          .document-right {
            padding: 40px 20px;

            .document-menu-detail {
              .menu-detail-title {
                font-size: 26px;
                margin-bottom: 20px;
              }
              .menu-detail-tips {
                padding: 6px 12px;
                font-size: 16px;
              }
              .menu-detail-desc {
                font-size: 14px;
                margin-bottom: 30px;
              }
            }
            .document-right-footer {
              margin-top: 50px;
            }
          }
        }
      }
    }
  }
  .drawer-header {
    img {
      width: 25vw;
    }
  }

  .drawer-content {
    .menu-list {
      .menu-list-item {
        margin-bottom: 20px;
        .menu-title {
          font-size: 14px;
          font-weight: 500;
          color: #585858;
          margin-bottom: 10px;
        }
      }
      .menu-item {
        padding: 5px;
        cursor: pointer;
        margin-bottom: 5px;
        border-radius: 5px;

        .menu-item-name {
          font-size: 14px;
          font-weight: 400;
          color: #383838;
          display: flex;
          align-items: center;
          .menu-item-icon {
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
        }
        &.menu-item-active {
          background-color: #f0f0f0;
          .menu-item-name {
            font-weight: 600;
          }
        }
      }
    }
  }
</style>
